"use client";
import Link from "next/link";
import style from "./index.module.scss";
import Image from "next/image";
import GlobalSearch from "../GlobalSearch";
import { ThunderboltTwoTone, UploadOutlined } from "@ant-design/icons";
import { Avatar, Button, Popover, Space } from "antd";
import { useEffect, useState } from "react";
import { SEVER_URL, showNavPagesArr } from "@/configs/constant";
import { usePathname, useRouter } from "next/navigation";
import PersonalDetails from "../PersonalDetails";
import { useStore, useStoreType } from "@/zustand/store";
import { getUserById } from "@/api";
type TUserInfo = {
  userHead: string;
  userAccount: string;
  userName: string;
};
export default function Nav() {
  const pathname = usePathname();
  const router = useRouter();
  const [visible, setVisible] = useState(false);
  const isLogin = useStore((state: useStoreType) => state.isLogin);
  const [userInfo, setUserInfo] = useState<TUserInfo>({
    userHead: "",
    userAccount: "",
    userName: "",
  } as TUserInfo);
  const getUserInfo = async () => {
    const res = await getUserById({
      id: Number(localStorage.getItem("userId")),
    });
    setUserInfo(res.data.data);
  };
  useEffect(() => {
    const flage = showNavPagesArr.includes(pathname);
    flage ? setVisible(true) : setVisible(false);
    if (pathname !== "/Login") {
      localStorage.getItem("token") && getUserInfo();
    }
  }, [pathname]);

  const handleSearch = (value: string) => {
    console.log(value);
    // TODO:搜索逻辑
  };
  const handlePublish = () => {
    const pathname = window.location.pathname;
    if (pathname === "/" || pathname.includes("Post")) {
      router.push("/PublishPost");
    } else if (pathname.includes("Course")) {
      router.push("/PublishCourse");
    }
  };
  return (
    <div>
      {visible && (
        <div className={style["navContainer"]}>
          <Link href={"/"}>
            <Image
              src="/img/logo.png"
              alt="logo"
              width={120}
              height={40}
            ></Image>
          </Link>

          <div className={style["navList"]}>
            <Link href={"/"} className={style["link"]}>
              编程讨论
            </Link>
            <Link href={"/Course"} className={style["link"]}>
              编程课程
            </Link>
          </div>
          <GlobalSearch
            placeholder="请输入搜索内容"
            icon={<ThunderboltTwoTone />}
            className={style["search"]}
            handleSearch={(value) => handleSearch(value)}
          />
          {!isLogin ? (
            <Link href={"/Login"}>
              <Button className={style["loginBtn"]}>注册登录</Button>
            </Link>
          ) : (
            <Popover
              content={
                <PersonalDetails
                  userName={
                    userInfo.userName ? userInfo.userName : userInfo.userAccount
                  }
                />
              }
            >
              {/* 登录后显示头像 */}
              <Avatar
                className={style["avatar"]}
                size={"large"}
                gap={4}
                src={`${SEVER_URL}${userInfo.userHead}`}
              >
                {!userInfo.userHead && userInfo.userName
                  ? userInfo.userName.charAt(0).toLocaleUpperCase()
                  : userInfo.userAccount.charAt(0).toLocaleUpperCase()}
              </Avatar>
            </Popover>
          )}
          <div className={style["publicationBtn"]} onClick={handlePublish}>
            <Space>
              <UploadOutlined style={{ color: "#fff" }} />
              <span style={{ color: "#fff" }}>发布</span>
            </Space>
          </div>
        </div>
      )}
    </div>
  );
}
